<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<h:head>
	<title><ui:insert name="pageTitle">Page Title</ui:insert></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<!--
	<h:outputScript library="primefaces" name="jquery/jquery.js" />
	<script type="text/javascript">$ = jQuery;</script>
	-->
	<h:outputStylesheet library="css" name="bootstrap.css" />
	<link href='http://fonts.googleapis.com/css?family=Pinyon+Script' rel='stylesheet' type='text/css'/>
	<style>
		body {
			padding-top: 60px;
		}
	</style>
</h:head>
<h:body>
	<!--
	Barre de navigation
	-->
	<div class="navbar navbar-inverse navbar-fixed-top" style="background-color: #4BB5AE;">
		<div class="container" style="background-color: #4BB5AE;">

			<div class="navbar-header" style="background-color: #4BB5AE;">
				<a href="../" class="navbar-brand" style="font-family:'Pinyon Script', cursive;font-size : 34px;color:#EFF0F0;font: bold;">Luxury Resort</a>
				
				<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main" style="background-color: #4BB5AE;">
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
			</div>

			<div class="navbar-collapse collapse" id="navbar-main" style="background-color: #4BB5AE;">
				
				<h:form id="LoginForm" class="navbar-form navbar-right" style="background-color: #4BB5AE;">
					<ul class="nav navbar-nav navbar-right" style="background-color: #4BB5AE;">
<!-- 						<li><h:outputText value="#{loginManagedBean.welcome}" /></li> -->
						<li><h:panelGroup id="PanelConnect1"
								rendered="#{loginManagedBean.connectFieldsShow}">
								<li><h:inputText id="Login" class="form-control col-lg-2"
										placeholder="Login" style="padding-right: 1px;padding-left: 1px;margin-right: 10px;margin-left: 5px;"
										value="#{loginManagedBean.connectionUser}" /></li>
								<li>
								<h:inputSecret id="Password" style="padding-right: 1px;padding-left: 1px;margin-right: 10px;margin-left: 10px;"
										class="form-control col-lg-2" placeholder="Mot de passe"
										value="#{loginManagedBean.connectionPassword}" /></li>
								<li><div class="col-lg-3"><h:commandButton class="btn btn-primary" 
										value="Connexion" action="#{loginManagedBean.connect}" style="background-color: #4BB5AE;font-size : 14px;">
										<f:ajax execute="LoginForm" render="LoginForm"></f:ajax>
									</h:commandButton>
									</div></li>
									<li>
									<a href="../pages/creationCompte.jsf" class="btn btn-primary" style="border : none;text-decoration: underline;padding-top:7px;font-size : 14px;">Créer mon compte</a>
									</li>
							</h:panelGroup></li>
						<li><h:panelGroup id="PanelConnect2"
								rendered="#{loginManagedBean.connectDisconnectShow}">
								<li style="padding-top:10px;"><h:outputText value="#{loginManagedBean.welcome}" style="margin-right: 10px;color: white;font-size : 14px;"/></li>
								<li><h:commandButton class="btn btn-primary"
										value="Déconnexion" action="#{loginManagedBean.disconnect}" style="background-color: #4BB5AE;font-size : 14px;">
									</h:commandButton></li>
								<li>
									<a href="../pages/creationCompte.jsf" class="btn btn-primary" style="border : none;text-decoration: underline;padding-top:7px;background-color: #4BB5AE;font-size : 14px;">Créer mon compte</a>
									</li>
							</h:panelGroup></li>
					</ul>
				</h:form>
			</div>
			
		</div>
	</div>
	<!--
	Conteneur principal
	-->
	<div class="container">
		<h1>
			<ui:insert name="pageHeader">Page Header</ui:insert>
		</h1>
		<ui:insert name="body">Page Body</ui:insert>
	</div>
	<!--
	Inclusion Javascript pour BootStrap
	-->
	<h:outputScript library="js" name="bootstrap.min.js" />
	<script type="text/javascript">
	PrimeFaces.locales['fr'] = {
	    closeText: 'Fermer',
	    prevText: 'Précédent',
	    nextText: 'Suivant',
	    monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre' ],
	    monthNamesShort: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Jun', 'Jul', 'Aoû', 'Sep', 'Oct', 'Nov', 'Déc' ],
	    dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
	    dayNamesShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
	    dayNamesMin: ['D', 'L', 'M', 'M', 'J', 'V', 'S'],
	    weekHeader: 'Semaine',
	    firstDay: 1,
	    isRTL: false,
	    showMonthAfterYear: false,
	    yearSuffix:'',
	    timeOnlyTitle: 'Choisir l\'heure',
	    timeText: 'Heure',
	    hourText: 'Heures',
	    minuteText: 'Minutes',
	    secondText: 'Secondes',
	    currentText: 'Maintenant',
	    ampm: false,
	    month: 'Mois',
	    week: 'Semaine',
	    day: 'Jour',
	    allDayText: 'Toute la journée'
	};
	</script>
</h:body>
</html>